<style lang="less">
	/*@import './international.less';*/
</style>

<template>
	<Transfer :data="idata" :target-keys="itargetKeys" :filterable="filterable" :filter-method="filterMethod"
			  :url="url" :params="params" :convert="convert" @on-change="onChange" :titles="titles" :list-style="listStyle"></Transfer>
</template>

<script>
    // datagrid
    import util from '@/libs/util';

    export default {
        data () {
            return {
                name: 'autoTransfer',
                idata: this.data,
                itargetKeys: this.targetKeys
            }
        },
        methods: {
            loadData(){
                let me = this;
                util.post({
                    url: me.url,
                    params: me.params,
                    ajaxSuccess(response){
                        let context = response.data;
                        let resData = context.data.total === undefined ? context.data : context.data.list; // 支持分页和不分页的
                        resData.forEach((value) => {
                            me.idata.push(me.convert(value));
                        });
                    }
                });
            },
            onChange(newTargetKeys){
                this.itargetKeys = newTargetKeys;
                this.$emit("autoTransfer_onChange");
            }
        },
        props: {
            data: {
                type: [Array],
                default(){
                    return [];
                }
            },
            targetKeys: {
                type: [Array],
                default(){
                    return [];
                }
            },
            url: String,
            params: Object,
            filterable: {
                type: [Boolean],
                default(){
                    return true;
                }
            },
            filterMethod: {
                type: Function,
                default(data, query){
                    return (data.label + "").indexOf(query) > -1 || (data.key + "").indexOf(query) > -1;
                }
            },
            convert: { // dto和transfer数据格式的转化
                type: [Function],
                default(value){
                    return {
                        label: value.text,
                        key: value.id,
                        disabled: +value.state !== 1
                    }
                }
            },
            titles: {
                type: [Array],
                default(){
                    return ["可选", "已分配"];
                }
            },
            listStyle: Object
        },
        mounted() {
            let me = this;
            me.loadData();
        },
        watch: {
            data(val) {
                this.idata = val;
            },
            idata(val){
                this.$emit("update:data", val);
            },
            targetKeys(val) {
                this.itargetKeys = val;
            },
            itargetKeys(val){
                this.$emit("update:targetKeys", val);
            }
        },
    }
</script>